<template>
	<div class="View">
		<div class="title">
			<i class="iconfont"></i>
			{{ $t("message.unit.title") }}
		</div>
		<div class="tab tab1">

			<div class="content">
				<div class="title ">{{ $t("message.unit.lab1") }}</div>
				<div class="row">
					<p class="LT"> </p>
					<p class="LT">{{ $t("message.unit.list1.column1") }}</p>
					<p class="LT">{{ $t("message.unit.list1.column2") }}</p>
					<p class="LT">{{ $t("message.unit.list1.column3") }}</p>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column4") }}
					</div>
					<el-input class="orange" v-model="M.wgtUntSymb"
						@input="M.wgtUntSymb = $setMaxLength(M.wgtUntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.wgtSiSymb"
						@input="M.wgtSiSymb = $setMaxLength(M.wgtSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.wgtConTani"
						@input="M.wgtConTani = $setMyNum(M.wgtConTani, '5 - 7')"></el-input>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column5") }}
					</div>
					<el-input class="orange" v-model="M.lngUntSymb"
						@input="M.lngUntSymb = $setMaxLength(M.lngUntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.lngSiSymb"
						@input="M.lngSiSymb = $setMaxLength(M.lngSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.lngConTani"
						@input="M.lngConTani = $setMyNum(M.lngConTani, '5 - 7')"></el-input>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column6") }}
					</div>
					<el-input class="orange" v-model="M.sizUntSymb"
						@input="M.sizUntSymb = $setMaxLength(M.sizUntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.sizSiSymb"
						@input="M.sizSiSymb = $setMaxLength(M.sizSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.sizConTani"
						@input="M.sizConTani = $setMyNum(M.sizConTani, '5 - 7')"></el-input>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column7") }}
					</div>
					<el-input class="orange" v-model="M.prsuntSymb"
						@input="M.prsuntSymb = $setMaxLength(M.prsuntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.prsSiSymb"
						@input="M.prsSiSymb = $setMaxLength(M.prsSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.prsConTani"
						@input="M.prsConTani = $setMyNum(M.prsConTani, '5 - 7')"></el-input>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column8") }}
					</div>
					<el-input class="orange" v-model="M.tmpUntSymb"
						@input="M.tmpUntSymb = $setMaxLength(M.tmpUntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.tmpSiSymb"
						@input="M.tmpSiSymb = $setMaxLength(M.tmpSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.tmpConTani"
						@input="M.tmpConTani = $setMyNum(M.tmpConTani, '5 - 7')"></el-input>
				</div>
				<div class="row">
					<div class="label">
						{{ $t("message.unit.list1.column9") }}
					</div>
					<el-input class="orange" v-model="M.cptUntSymb"
						@input="M.cptUntSymb = $setMaxLength(M.cptUntSymb, 10)"></el-input>
					<el-input class="p20" v-model="M.cptSiSymb"
						@input="M.cptSiSymb = $setMaxLength(M.cptSiSymb, 10)"></el-input>
					<i class="el-icon-close"></i>
					<el-input class="orange" v-model="M.cptConTani"
						@input="M.cptConTani = $setMyNum(M.cptConTani, '5 - 7')"></el-input>
				</div>


			</div>
		</div>

		<div class="footer">
			<el-button @click="initFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="addDataFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
			</el-button>
		</div>
	</div>
</template>

<script>
import {
	getUnitSystemData, getUpdUnitSystemDataTipsMsg, updUnitSystemData
} from "@/api/api";
import $ from "jquery";
export default {
	name: "Unit",
	data() {
		return {
			M: {}
		};
	},
	components: {},
	watch: {},
	methods: {
		async getAddMsgFn() {
			const response = await getUpdUnitSystemDataTipsMsg({});
			return response.data.msg;
		},
		async addDataFn() {
			const message = await this.getAddMsgFn();
			try {
				await this.$confirm(message, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				});
				let R = await updUnitSystemData(this.M);
				if (!R) {
					return
				}
				this.$message.success(R.data.msg);
				this.initFn();
			} catch (error) {
			}
			// let D = { this.tableData };
		},
		async getDataFn() {
			let D = {};
			let R = await getUnitSystemData(D);
			this.M = R.data.data[0];
			console.log(this.M);
		},
		async initFn() {
			await this.getDataFn();
		}
	},
	created() { },
	mounted() {
		this.initFn();
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
	height: 100%;
	padding-left: 32px;
	position: relative;

	.title {
		width: 100%;
		height: 32px;
		border-bottom: 1px solid #d8d8d8;
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10px;
		}

	}

	.tab {
		.title {
			border-bottom: 0;
			font-weight: 600;
			color: #2cb1e7;
			padding-left: 8px;
			height: 18px;
			margin: 13px 0 10px 0;
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 3px;
				height: 18px;
				position: absolute;
				left: 0;
				background-color: #2cb1e7;
			}
		}

		.titlet {
			margin: 13px 0 10px 0;
			padding: 17px 0 0 10px;
			height: auto;
			border-top: 1px solid #d8d8d8;
		}

		.content {
			.row {
				margin-top: 8px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.LT {
					width: 200px;
					text-align: center;
				}

				.LT:nth-child(1) {
					width: 100px;
				}

				.LT:nth-child(3) {
					margin-left: 20px;
				}

				.LT:nth-child(4) {
					margin-left: 42px;
				}

				.label {
					width: 100px;
					text-align: center;
				}

				.el-input {
					width: 200px;
					height: 28px;

					::v-deep .el-input__inner {
						width: 100%;
						height: 100%;
						border: 1px solid #8e8e8e4d;
					}
				}

				.p20 {
					margin: 0 0 0 20px;
				}

				.orange {
					::v-deep .el-input__inner {
						width: 100%;
						height: 100%;
						border: 1px solid #8e8e8e4d;
						background: rgb(255, 222, 172);
					}
				}

				i {
					font-weight: 700;
					display: inline-block;
					padding: 0 15px;
				}

			}

			.long {
				.ml {
					margin-left: 55px;
				}

				.el-input {
					width: 255px;
					height: 28px;

					::v-deep .el-input__inner {
						width: 100%;
						height: 100%;
						border: 1px solid #8e8e8e4d;
					}
				}
			}

			.input-style {
				width: 255px;

				::v-deep .el-input__inner {
					border: 1px solid #d9d9d9;
					height: 32px;
					background: #ffffff;
					font-size: 14px;
					color: #333333;
					font-weight: bold;
				}

				::v-deep .el-input .el-select__caret {
					width: 32px;
					height: 32px;
					line-height: 32px
				}

				::v-deep .el-input__suffix {
					right: 0;
					background: #f5f6f7;
					border: 1px solid #d9d9d9;
				}
			}
		}
	}

}

.footer {
	position: absolute;
	left: 32px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
